import {FC, useState} from "react";
import {Button, Col, Form, Row, Space, Table, Upload, UploadFile} from "antd";
import {PlusOutlined, UploadOutlined} from "@ant-design/icons";
import {ColumnsType} from "antd/es/table";

interface WorkshopLayoutInfoMaintenanceProps {
    id?: string
    visible?: boolean
}

interface DataType {
    key: string;
    name: string;
    term: string;
}

const columns1: ColumnsType<DataType> = [
    {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
    },
    {
        title: '周期',
        dataIndex: 'term',
        key: 'term',
        align: 'center',
    },
    {
        title: '操作',
        key: 'action',
        align: 'center',
        render: (_, record) => (
            <Space size="middle">
                <a>删除</a>
            </Space>
        ),
    },
];

const data1: DataType[] = [
    {
        key: '1',
        name: '小保养',
        term: '3月/次',
    },
    {
        key: '2',
        name: '小保养',
        term: '3月/次',
    },
    {
        key: '3',
        name: '小保养',
        term: '3月/次',
    },
];

const columns2: ColumnsType<DataType> = [
    {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
    },
    {
        title: '有效期',
        dataIndex: 'term',
        key: 'term',
        align: 'center',
    },
    {
        title: '操作',
        key: 'action',
        align: 'center',
        render: (_, record) => (
            <Space size="middle">
                <a>删除</a>
            </Space>
        ),
    },
];

const data2: DataType[] = [
    {
        key: '1',
        name: '机油',
        term: '3个月',
    },
    {
        key: '2',
        name: '叶片',
        term: '2个月',
    },
    {
        key: '3',
        name: '机油',
        term: '3个月',
    },
];


const WorkshopLayoutInfoMaintenance: FC<WorkshopLayoutInfoMaintenanceProps> = (props) => {

    const visibleStyle = {display: 'flex', overflow: 'auto', justifyContent: 'space-around', height: '700px'};
    const unVisibleStyle = {display: 'flex', overflow: 'auto', justifyContent: 'space-around', height: '0px'};

    const fileList:UploadFile[] = [
        {
            uid: '1',
            name: '压缩机保修证书',
            status: 'done',
            url: 'http://www.baidu.com/xxx.png',
        },
        {
            uid: '2',
            name: '设备维修SOP',
            status: 'done',
            url: 'http://www.baidu.com/xxx.png',
        },
        {
            uid: '3',
            name: '设备工作规范',
            status: 'done',
            url: 'http://www.baidu.com/xxx.png',
        },
    ];

    return (<div style={props.visible ? visibleStyle : unVisibleStyle}>
        <Row gutter={[0, 8]}>
            <Col span={24} xs={8} sm={16} md={24} lg={32} xl={40} xxl={48} style={{height: 1}}>
                <div style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between"
                }}>
                    <span style={{fontSize: 14, fontWeight: 550}}>维保计划</span>
                    <Button icon={<PlusOutlined/>} style={{width: 80}}>关联</Button>
                </div>
            </Col>

            <Col span={24}>
                <Table size={`small`} tableLayout={`fixed`} bordered={true} pagination={false} columns={columns1}
                       dataSource={data1}/>
            </Col>

            <Col span={24} xs={8} sm={16} md={24} lg={32} xl={40} xxl={48} style={{height: 1}}>
                <div style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between"
                }}>
                    <span style={{fontSize: 14, fontWeight: 550}}>备品备件</span>
                    <Button icon={<PlusOutlined/>} style={{width: 80}}>关联</Button>
                </div>
            </Col>

            <Col span={24}>
                <Table size={`small`} tableLayout={`fixed`} bordered={true} pagination={false} columns={columns2}
                       dataSource={data2}/>
            </Col>

            <Col span={24} style={{height: 1}}>
                <span style={{fontSize: 14}}>维保文件</span>
            </Col>
            <Col span={22} offset={2}>
                <Upload fileList={fileList}>
                    {/*<Button icon={<UploadOutlined/>}>Upload</Button>*/}
                </Upload>
            </Col>
        </Row>
    </div>)
}

export default WorkshopLayoutInfoMaintenance
